<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中海数据看板</title>
  <link rel="stylesheet" href="./css/init.css">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <section class="app-main">
    <header class="the-header">
      红树湾公寓用户数据分析
    </header>

    <nav class="navbar">
      <input type="text" class="search" placeholder="请输入搜索内容">
      <div class="btns" id="navbar-btns">
        <a data-name="week" href="javascript:void(0);" class="active navbar-item">
          近一周
        </a>
        <a data-name="month" class="navbar-item" href="javascript:void(0);">
          按月
        </a>
        <a data-name="year" class="navbar-item" href="javascript:void(0);">
          按年
        </a>
      </div>
    </nav>

    <div class="device-state">
      <div class="device-state-number l_container">
        <p class="l_c_header">设备概况</p>
        <ul class="device-circle-list">
          <li class="device-circle-item">
            <div class="device-circle-item-chart " id="device-online"></div>
            <p class="device-circle-item-info">主机在线</p>
          </li>
          <li class="device-circle-item">
            <div class="device-circle-item-chart " id="device-open"></div>
            <p class="device-circle-item-info">设备打开</p>
          </li>
          <li class="device-circle-item">
            <div class="device-circle-item-chart " id="device-offline"></div>
            <p class="device-circle-item-info">设备离线</p>
          </li>
        </ul>
      </div>
      <div class="device-state-online l_container">
        <p class="l_c_header">设备在线</p>
        <ul class="device-line-list" id="deviceLineList">
          <li class="device-line-item">
            <div class="device-line-item-info">
              <div class="device-line-item-info-left">灯光</div>
              <div class="device-line-item-info-right"><span class="online"> 60 </span> / <span class="total"> 80
                </span></div>
            </div>
            <div class="device-line-item-progress">
              <div class="progress-container">
                <div class="progress-main" id="the-light"></div>
              </div>
            </div>
          </li>
          <li class="device-line-item">
            <div class="device-line-item-info">
              <div class="device-line-item-info-left">温控器</div>
              <div class="device-line-item-info-right"><span class="online"> 60 </span> / <span class="total"> 80
                </span></div>
            </div>
            <div class="device-line-item-progress">
              <div class="progress-container">
                <div class="progress-main" id="the-havc"></div>
              </div>
            </div>
          </li>
          <li class="device-line-item">
            <div class="device-line-item-info">
              <div class="device-line-item-info-left">其他电器</div>
              <div class="device-line-item-info-right"><span class="online"> 60 </span> / <span class="total"> 80
                </span></div>
            </div>
            <div class="device-line-item-progress">
              <div class="progress-container">
                <div class="progress-main" id="the-other"></div>
              </div>
            </div>
          </li>
          <li class="device-line-item">
            <div class="device-line-item-info">
              <div class="device-line-item-info-left">窗帘</div>
              <div class="device-line-item-info-right"><span class="online"> 60 </span> / <span class="total"> 80
                </span></div>
            </div>
            <div class="device-line-item-progress">
              <div class="progress-container">
                <div class="progress-main" id="the-curtain"></div>
              </div>
            </div>
          </li>
          <li class="device-line-item">
            <div class="device-line-item-info">
              <div class="device-line-item-info-left">传感器</div>
              <div class="device-line-item-info-right"><span class="online"> 60 </span> / <span class="total"> 80
                </span></div>
            </div>
            <div class="device-line-item-progress">
              <div class="progress-container">
                <div class="progress-main" id="the-sensor"></div>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>
    <div class="device-chart">
      <div class="chart-left">
        <div class=" l_container chart-left-container">
          <div class="header-container">
            <p class="l_c_header" style="width: 50%;">设备工作时长</p>
            <ul class="header-tabs">
              <li class="header-tabs-item">灯光</li>
              <li class="header-tabs-line"></li>
              <li class="header-tabs-item">窗帘</li>
              <li class="header-tabs-line"></li>
              <li class="header-tabs-item">温控器</li>
              <li class="header-tabs-line"></li>
              <li class="header-tabs-item">传感器</li>
            </ul>
          </div>
          <div class="chart-left-main">
            <div class="work-chart" id="work-chart"></div>
          </div>
        </div>
        <div class=" l_container chart-left-container">
          <div class="header-container">
            <p class="l_c_header" style="width: 50%;">设备上线率</p>
          </div>
          <div class="chart-left-main">
            <div class="work-chart" id="online-chart"></div>
          </div>
        </div>
        <div class=" l_container chart-left-container">
          <div class="header-container">
            <p class="l_c_header" style="width: 50%;">用户行为日活率</p>
          </div>
          <div class="chart-left-main">
            <div class="work-chart" id="user-chart"></div>
          </div>
        </div>
      </div>
      <div class="chart-right">
        <div class="l_container chart-right-container">
          <div class="header-container">
            <p class="l_c_header">用户行为</p>
          </div>
          <div class="tabbar">
            <ul class="flex tabbar-inner" id="usercommand">
              <li data-name="voice" class="active ti-item"><a href="javascript:void(0);">语音控制</a></li>
              <li data-name="keypad" class="ti-item"><a href="javascript:void(0);">按键控制</a></li>
              <li data-name="amg" class="ti-item"><a href="javascript:void(0);">中控屏控制</a></li>
            </ul>
            <div class="header-container">
              <ul class="header-tabs auto-width">
                <li class="header-tabs-item">在线命令</li>
                <li class="header-tabs-line"></li>
                <li class="header-tabs-item">离线命令</li>
              </ul>
            </div>

          </div>
          <div class="chart-right-main">
            <div id="behavior-chart" class="behavior-chart"></div>
          </div>
        </div>
      </div>
    </div>

  </section>

  <script src="./js/dist/echarts.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/chart.js"></script>
</body>

</html>